import { formatNumber } from '@/utils/util'
import { Space, TableColumnsType, Tooltip, Typography } from 'antd'
import dayjs from 'dayjs'
import { NavigateFunction } from 'react-router-dom'
import { DashboardSaleVO as ITableData } from './types'
export const useIndexColumns = ({ navigate }: { navigate: NavigateFunction }): TableColumnsType<ITableData> => [
  {
    title: '层级',
    dataIndex: 'dataType',
    key: 'dataType',
    align: 'center',
    width: 60,
    fixed: 'left',
    render: (info) => {
      if (info === 'SPU') return '款'
      else if (info === 'SKC') return '色'
      else return '-'
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    fixed: 'left',
    width: 130,
    render: (info, rows) => {
      return info ? (
        <div style={{ position: 'relative' }}>
          <Typography.Link
            ellipsis
            onClick={() => {
              window.open('/goods/manage/detail?spuId=' + rows?.spuId)
            }}
            style={{ paddingLeft: 12, paddingRight: 12 }}
          >
            {info}
          </Typography.Link>
          {rows?.dataType === 'SPU' && rows?.mainProductTag === '是' && (
            <span
              style={{
                width: 22,
                height: 22,
                position: 'absolute',
                right: 0,
                top: '50%',
                transform: 'translate(0,-50%)',
                borderRadius: '50%',
                backgroundColor: 'var(--primary-color)',
                color: '#fff',
                verticalAlign: 'middle',
              }}
            >
              主
            </span>
          )}
        </div>
      ) : (
        '-'
      )
    },
  },
  {
    title: '款式名称',
    dataIndex: 'spuName',
    key: 'spuName',
    align: 'center',
    fixed: 'left',
    width: 250,
    ellipsis: {
      showTitle: false,
    },
    render: (info, rows) => {
      return info ? (
        <Tooltip placement="top" title={info}>
          <Typography.Link
            ellipsis
            onClick={() => {
              window.open('/goods/manage/detail?spuId=' + rows?.spuId)
            }}
            style={{ paddingLeft: 12, paddingRight: 12 }}
          >
            {info}
          </Typography.Link>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '颜色',
    dataIndex: 'colorName',
    key: 'colorName',
    align: 'center',
    fixed: 'left',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '畅平滞标签',
    dataIndex: 'salesTag',
    key: 'salesTag',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '季节分组',
    dataIndex: 'seasonGroup',
    key: 'seasonGroup',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '吊牌价',
    dataIndex: 'tagPrice',
    key: 'tagPrice',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '大类',
    dataIndex: 'largeClassName',
    key: 'largeClassName',
    align: 'center',
    width: 86,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '中类',
    dataIndex: 'midClassName',
    key: 'midClassName',
    align: 'center',
    width: 86,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '小类',
    dataIndex: 'smallClassName',
    key: 'smallClassName',
    align: 'center',
    width: 110,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '细类',
    dataIndex: 'fineClassName',
    key: 'fineClassName',
    align: 'center',
    width: 110,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '采购方式',
    dataIndex: 'purchaseType',
    key: 'purchaseType',
    align: 'center',
    width: 100,
    render: (info) => {
      return info == 0 ? '集采' : info == 1 ? '现采' : '-'
    },
  },
  {
    title: '首销时间',
    dataIndex: 'firstSaleTime',
    key: 'firstSaleTime',
    align: 'center',
    width: 120,
    render: (info) => {
      return info ? dayjs(info)?.format('YYYY-MM-DD') : '-'
    },
  },
  {
    title: '销售额',
    dataIndex: 'saleAmount',
    key: 'saleAmount',
    align: 'center',
    fixed: 'right',
    width: 120,
    render: (info) => {
      return formatNumber(info)
    },
  },
  {
    title: '销售数量',
    dataIndex: 'saleQty',
    key: 'saleQty',
    align: 'center',
    fixed: 'right',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '折扣率',
    dataIndex: 'totalDiscount',
    key: 'totalDiscount',
    align: 'center',
    fixed: 'right',
    width: 100,
    render: (info) => Number(info || 0) + '%',
  },
  {
    title: '总库存 / 总周转 (含采购)',
    dataIndex: 'stockWithPurchase',
    key: 'stockWithPurchase',
    align: 'center',
    fixed: 'right',
    width: 190,
    render: (info, rows) => {
      return formatNumber(info) + ' / ' + (rows?.turnoverWithPurchase || '-')
    },
  },
  {
    title: '总库存 / 总周转 (不含采购)',
    dataIndex: 'stockWithoutPurchase',
    key: 'stockWithoutPurchase',
    align: 'center',
    fixed: 'right',
    width: 190,
    render: (info, rows) => {
      return formatNumber(info) + ' / ' + (rows?.turnoverWithoutPurchase || '-')
    },
  },
]
